<template>
  <el-popover
    popper-class="history-popover"
    placement="top"
    width="320"
    trigger="hover"
  >
    <el-tabs
      tab-position="left"
      style="
        color: black;
        height: 320px;
        border: none;
        background-color: white;
        margin: 0;
        padding: 0;
      "
      type="border-card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="浏览历史">
        <history-table :items="historyTableData"></history-table>
      </el-tab-pane>
      <el-tab-pane
        v-for="item in favList"
        :key="item.boxroomId"
        :label="item.boxroomName"
      >
        <history-table :items="favContent"></history-table>
      </el-tab-pane>
    </el-tabs>
    <div class="history" slot="reference" @mouseover="getHistoryTable()">
      足迹
    </div>
  </el-popover>
</template>

<script>
import {
  getFavContentData,
  getRecentFile,
  getFavListData,
} from "@/api/frame/frame";
import HistoryTable from "@/components/Frame/Table/HistoryTable.vue";

export default {
  components: { HistoryTable },
  methods: {
    //获取浏览历史
    getHistoryTable() {
      let data = { userId: this.userId };
      getRecentFile(data).then((res) => {
        this.historyTableData = res.data;
        console.log(res);
      });
    },
    //获取收藏夹列表
    getFavList() {
      let data = { userId: this.userId };
      getFavListData(data).then((res) => {
        this.favList = res.data;
      });
    },
    //获取收藏夹内容
    getFavContent(favId) {
      this.favContent = [];
      let data = { boxroomId: favId };
      getFavContentData(data).then((res) => {
        this.favContent = res.data;
        console.log(typeof this.favContent);
      });
    },
    //选项卡切换事件
    handleClick(tab) {
      if (tab.index === 0) this.getHistoryTable();
      else this.getFavContent(this.favList[tab.index - 1].boxroomId);
    },
  },
  data() {
    return {
      historyTableData: [],
      favList: [],
      favContent: [],
      userId: this.$store.getters.userId,
    };
  },
  created() {
    this.getFavList();
  },
};
</script>

<style scoped>
.history {
  cursor: pointer;
  display: inline-block;
  height: 48px;
  width: 96px;
  color: #005a95;
  line-height: 48px;
  font-weight: bold;
}
.history:hover {
  color: #7dc5eb;
}
</style>
<style>
.history-popover .popper__arrow::after {
  border-bottom-color: white !important;
}
.el-popover.history-popover {
  background-color: white;
  margin-top: 6px;
  padding: 0;
}
.history-popover .el-tabs.el-tabs--left.el-tabs--border-card .el-tabs__content {
  padding: 0;
}
.history-popover
  .el-tabs.el-tabs--left.el-tabs--border-card
  .el-tabs__header.is-left {
  margin: 0;
}
.history-popover
  .el-tabs.el-tabs--left.el-tabs--border-card
  .el-tabs__item.is-left {
  text-align: left;
}
.history-popover
  .el-tabs.el-tabs--left.el-tabs--border-card
  .el-tabs__item.is-left:hover {
  color: #005a95;
}
.history-popover
  .el-tabs.el-tabs--left.el-tabs--border-card
  .el-tabs__item.is-left.is-active {
  background-color: white;
  color: #005a95;
}
</style>
